<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="UTF-8">
    <title>抽卡</title>


    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <link th:href="@{../css/index.css}" rel="stylesheet" type="text/css">
</head>
<body >


<!--    顶部导航栏-->

    <nav id="top" class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" th:href="@{/index}">模拟抽卡首页</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a th:href="@{/cardmanage}">后台管理</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >昵称:<span th:text="${session.nickname}"></span><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a><span th:text="${session.nickname}"></span></a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">个人信息</a></li>
                            <li><a href="#">历史记录</a></li>
                            <li><a th:href="@{/loginout}">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div id="div1" >
        <p>{{message}}</p>
    </div>

    <!--    抽卡图片显示位置:-->
    <hr id="hr1">

    <div id="drawCardPage">
    <div id="cards">
        <div  v-for="cardinfo in cardinfos.data" id = "card">
            <div>
                <img class="text-center" v-bind:src="cardinfo.cardAddress">
                <p class="text-center">{{cardinfo.cardName}}</p>
            </div>
        </div>
    </div>
</div>

    <hr id="hr2">

<!--    单抽,10连 vue ajax实现-->
    <div id="vueButtons"  class="btn-group btn-group-lg" role="group" aria-label="...">
        <button type="button" class="btn btn-default" v-on:click="getDefault">重置</button>
        <button type="button" class="btn btn-default" v-on:click="getaxios(1)">单抽</button>
        <button type="button" class="btn btn-default" v-on:click="getaxios(10)">十连</button>
    </div>



    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="../js/index.js"></script>
</body>
</html>